<template>
  <div>
    <!-- 这里要记住不能v-for绑定el-row -->
    <div v-for="(item, index) in lands" :key="item.landId" class="land">
      <!-- 第一条信息 -->
      <el-row>
        <!-- 土地部分 -->
        <el-col :span="6" class="landName">
          <img
            :src="item.landPic"
            class="landPic"
            @click="toggleStatus(index)"
          />
          <span>{{ item.landName }}</span>
        </el-col>
        <!-- 文字部分  -->
        <el-col :span="6" class="text1">
          <h1>认购者: {{ item.owner }}</h1>
          <h1>状态 :{{ item.landstatus }}</h1>
          <h1>作物种类:{{ item.plant }}</h1>
        </el-col>
        <el-col :span="6" class="text2">
          <h1>土地位置:{{ item.position }}</h1>
          <h1>预计产量:{{ item.production }}</h1>
        </el-col>
        <!-- 功能部分 -->
        <el-col :span="6" class="func">
          <el-button color="#4bc05d" @click="dialogVisibleUpdate = true"
            >更新</el-button
          >
          <div></div>
          <el-button
            color="#4bc05d"
            style="margin-top: 55px"
            @click="dialogVisibleService = true"
            >交流</el-button
          >
          <!-- <img src="@/assets/draw.png">
                    <img src="@/assets/comunicate.png">
                    <img src="@/assets/donate.png"> -->
        </el-col>
        <!-- 更新功能 -->
        <el-dialog
          v-model="dialogVisibleUpdate"
          width="25%"
          style="background-color: #a3ea9b; height: 270px"
          class="update"
          title="更新农产品状态"
        >
          <h1 style="color: white; padding: 0px"></h1>
          <span style="color: white; font-size: 26px">状态: </span>
          <el-select v-model="value1" placeholder="Select" style="width: 200px">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>

          <el-image class="uploadPic" :src="upload" />
          <input
            type="file"
            style="display: none"
            show-file-list="false"
            ref="landPicture"
            @change="handlePictureChange"
          />
          <el-button class="upload" @click="showPictureDialog"
            >上传图片</el-button
          >
          <el-button class="save" @click="save()">保存</el-button>
        </el-dialog>
        <!-- 交流功能 -->
        <el-dialog
          v-model="dialogVisibleService"
          width="32%"
          :before-close="handleClose"
          style="background-color: #ffffff"
          :title="title"
        >
          <!-- 未实现：这里显示对话 -->
          <div class="service">
            <el-input
              v-model="textarea"
              type="textarea"
              :rows="7"
              placeholder=""
            />
            <div class="serviceFooter">
              <img
                src="../assets/语音.png"
                style="inline-block;margin-top:5px"
              />
              <input type="text" style="flex: 1; margin-left: 5px" />
              <el-button style="margin-left: 10px">确认</el-button>
            </div>
          </div>
        </el-dialog>
      </el-row>
      <el-collapse-transition style="border-top: solid 1px rgb(0, 0, 0)">
        <div v-show="status[index]">
          <el-steps :active="1" align-center class="step">
            <el-step title="播种" description="20xx/xx/xx" />
            <el-step title="半成熟" description="20xx/xx/xx" />
            <el-step title="成熟" description="20xx/xx/xx" />
          </el-steps>
          <el-row class="statusPic">
            <img src="../assets/肥料图.jpeg" />
            <img src="../assets/逛逛其它图.png" />
            <img src="../assets/土地图.jpg" />
          </el-row>
        </div>
      </el-collapse-transition>
    </div>
    <h1 class="reachBottom">已 到 最 底</h1>
  </div>
  <!-- 更新功能 -->
</template>

<script>
import { ref } from "vue";
import axios from "axios";
const show = ref(true);
export default {
  name: "",
  components: {},
  data() {
    return {
      title: "市民" + "：小明",
      upload: require("../assets/Camera.png"),
      dialogVisibleUpdate: ref(false),
      dialogVisibleService: ref(false),
      showStatusBar: false,
      status: [false, false],
      drawStatus: true,
      value1: ref(""),
      lands: [
        {
          landId: "",
          landName: "土地A",
          landPic: require("@/assets/backgroundImage.png"),
          owner: "小明",
          landstatus: "种植",
          plant: "土豆",
          position: "田里",
          production: "3000-5000kg",
        },
        {
          landId: "",
          landName: "土地B",
          landPic: require("@/assets/backgroundImage.png"),
          owner: "小红",
          landstatus: "种植",
          plant: "西红柿",
          position: "山间",
          production: "5000kg左右",
        },
      ],
      options1: [
        {
          value: "种植",
          label: "种植",
        },
        {
          value: "半成熟",
          label: "半成熟",
        },
        {
          value: "成熟",
          label: "成熟",
        },
      ],
    };
  },
  methods: {
    // async getData() {
    //     try {
    //         const response = await axios.get("");
    //         this.lands = response.data;
    //     } catch (error) {
    //         console.log(error);
    //     }
    // }
    //获取数据长度
    // setStatus() {
    //     const length = this.lands.length;
    //     this.status = new array(length).fill(false);
    // },
    toggleStatus(index) {
      this.status[index] = !this.status[index];
    },
    showPictureDialog() {
      this.$refs.landPicture.click();
    },
    handlePictureChange(event) {
      const file = event.target.files[0];
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => {
        this.upload = reader.result;
      };
    },
    save() {
      this.lands[0].landPic = this.upload;
      this.lands[0].landstatus = this.value1;
    },
  },
  //从后端接口获取数据
  created() {
    // this.getData();
    // this.setStatus();
  },
  mounted() {},
};
</script>
<style lang="css" scoped>
.transition-box {
  margin-bottom: 10px;
  width: 200px;
  height: 100px;
  border-radius: 4px;
  background-color: red;
  text-align: center;
  color: #fff;
  padding: 40px 20px;
  box-sizing: border-box;
  margin-right: 20px;
}

/* 土地部分 */
.land {
  border: solid 0.5px rgb(0, 0, 0);
  /* background-color: gold; */
  /* #67b383 */
  background-color:transparent;
  border-collapse: collapse;
}

.landName {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
}

.landPic {
  height: 100px;
  width: 150px;
  margin-right: 20px;
  /* margin: 20px 0 0 190px; */
}

/* 溯源状态栏 */
.statusPic {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.statusPic img {
  height: 50px;
  width: 80px;
  margin-bottom: 10px;
}

/* 文字部分 */
h1 {
  padding-left: 15px;
  font-size: 25px;
  font-weight: normal;

  margin-block-start: 0;
  margin-block-end: 0;
}

.text1 {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

.text2 {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  margin-top: 10px;
}

/* 功能部分 */
/* 这里记得适配优化 */
.func .el-button {
  display: flex;

  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 10px 0 10px 190px;
  height: 30px;
  border-radius: 4px;
}

/* 更新功能 */
.update {
  position: relative;
  height: 400px;
  margin-top: -20px;
}

/* 更新功能--上传的具体图片 */
.update .uploadPic {
  position: absolute;

  width: 140px;
  height: 110px;
  bottom: 5px;
  left: 15px;
}

/* 更新功能--上传图片 */
.update .upload {
  /* position: absolute; */
  position: absolute;
  bottom: 60px;
  right: 80px;
  color: white;
  background-color: #4bc05d;
  margin: 10px 0 10px 190px;
  height: 40px;
  border-radius: 4px;
  font-size: 20px;
  line-height: 40px;
  padding: 0 5px;
  letter-spacing: 3px;
}

/* 更新功能--保存 */
.update .save {
  /* position: absolute; */
  position: absolute;
  bottom: 2px;
  right: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  background-color: #4bc05d;
  margin: 10px 0 10px 190px;
  height: 40px;
  font-size: 20px;
  line-height: 40px;
  border-radius: 4px;
  letter-spacing: 2px;
}

/* 交流功能 */
.service {
  margin-top: -20px;
}

.serviceFooter {
  display: flex;
  /* justify-content: center; */
  justify-content: space-around;
  margin-top: 8px;
}

.serviceFooter .el-button {
  background-color: #4bbf5c;
  color: white;
}

/* 到达最底 */
.reachBottom {
  text-align: center;
  font-size: 40px;
  font-weight: 100;
}
</style>
